import { Button, Space, Table } from 'antd';
import classNames from 'classnames';
import React, { useMemo, useRef, useState } from 'react';

import CusDrawer from '@/components/CusDrawer';
import ExaminationDetail from '@/components/resourceLibraryComp/ExaminationDetail';
import { isEmpty } from 'lodash-es';
import { FormulaSetModel } from '../CommonFormulaSet';
import OStyle from './index.less';
import { QueTableProps } from './interface';
// import SimpleFormulaSet from './SimpleFormulaSet';

const DRAWERWIDTH = 480;
const QueTable: React.FC<QueTableProps> = (props) => {
  const {
    questions,
    onQuestionsRemove,
    onAddQuestion,
    scoreTypeName,
    onAddOrEditfactor,
    onSetSimpleRules,
    onRefresh,
    pageType,
  } = props;
  const [currExaminationId, setCurrExaminationId] = useState<string>();
  const [drawerOpen, setDrawerOpen] = useState(false);
  const FormulaSet = useRef<any>(); // 非简单计算的设置规则
  const FormRulesOne = useRef<any>(); // 简单计算的设置规则

  //课件详情drawer 配置
  const drawerConfig = useMemo(() => {
    return {
      title: scoreTypeName + '详情',
      width: DRAWERWIDTH,
      open: drawerOpen,
      onClose: () => {
        setDrawerOpen(false);
      },
      destroyOnClose: true,
      children: currExaminationId && <ExaminationDetail examinationId={currExaminationId} />,
    };
  }, [currExaminationId, drawerOpen]);

  const columns = useMemo(
    () => [
      {
        title: '因子',
        key: 'factorName',
        dataIndex: 'factorName',
      },
      {
        title: '编号',
        key: 'code',
        dataIndex: 'code',
        // width: 100,
      },
      {
        title: '计算规则',
        key: 'calculationRules',
        dataIndex: 'calculationRules',
        render: (text: number) => {
          switch (text) {
            case 1:
              return '按简单规则计算';
            case 2:
              return '按公式A计算';
            case 3:
              return '按公式B计算';
            case 4:
              return '按公式C计算';
          }
        },
      },
      // {
      //   title: '细则',
      //   key: 'detailedRules',
      //   dataIndex: 'detailedRules',
      // },
      {
        title: '备注',
        key: 'remarks',
        dataIndex: 'remarks',
        ellipsis: true,
        // width: 200,
      },
      {
        title: '最高得分',
        key: 'maxScore',
        dataIndex: 'maxScore',
      },
      {
        title: '操作',
        key: 'action',
        width: 200,
        render: (text: any, record: any) => {
          return (
            <Space direction="horizontal" size={0}>
              {record.resourceType !== 1 && (
                <Button
                  type="text"
                  size="small"
                  onClick={(e: React.MouseEvent) => {
                    e.stopPropagation();
                    // setCurrExaminationId(record.id);
                    // setDrawerOpen(true);
                    onAddOrEditfactor({ ...record, type: 'edit' }); // 编辑因子
                  }}
                >
                  <span className="safe-edu_table_operation_text">编辑</span>
                </Button>
              )}
              <Button
                type="text"
                size="small"
                onClick={(e: React.MouseEvent) => {
                  e.stopPropagation();
                  onQuestionsRemove(record);
                }}
              >
                <span className="safe-edu_table_operation_text">删除</span>
              </Button>
              <Button
                type="text"
                size="small"
                onClick={(e: React.MouseEvent) => {
                  e.stopPropagation();
                  if (record.calculationRules == 1) {
                    onSetSimpleRules({ ...record, type: 'edit' }); // 编辑简单规则计算
                  } else {
                    FormulaSet.current?.showModal({
                      factorId: record.factorId,
                      calculationRules: record.calculationRules,
                    });
                  }
                }}
              >
                <span className="safe-edu_table_operation_text">设置计算规则</span>
              </Button>
            </Space>
          );
        },
      },
    ],
    [questions.length],
  );

  return (
    <>
      <CusDrawer {...drawerConfig} />
      <div className={OStyle.question_table_box}>
        {!isEmpty(questions) && (
          <Table columns={columns} pagination={false} size="small" dataSource={questions} rowKey="id" />
        )}
        <div className={classNames(OStyle.box_add, { [`${OStyle.add_no_empty}`]: !isEmpty(questions) })}>
          {isEmpty(questions) && <p className={OStyle.add_empty_text}>暂无因子</p>}
          <Button
            type="default"
            size="middle"
            onClick={() => {
              onAddOrEditfactor({ type: 'add' });
            }}
          >
            {isEmpty(questions) ? '立即添加' : '继续添加'}
          </Button>
        </div>
      </div>
      {/* 公式设置弹窗Dmeo */}
      <FormulaSetModel
        innerRef={FormulaSet}
        relatedType={pageType}
        onChange={() => {
          console.log('刷新列表等操作');
          onRefresh();
        }}
      />
      {/* <SimpleFormulaSet
        innerRef={FormRulesOne}
        relatedType={pageType}
        onChange={() => {
          console.log('刷新列表等操作');
          onRefresh();
        }}
      /> */}
    </>
  );
};

export default QueTable;
